<template>
	<div class="content">
		<mt-header fixed :title="exerciseInfo.coursename+'练习'">
    	<mt-button icon="back" slot="left" @click="back"></mt-button>	

			<mt-button v-if="currentBox!=='statis'" slot="right">{{ index+1 }}/{{ questionList.length }}题</mt-button>
		</mt-header>
		<!--习题盒子-->
		<div class="contain" v-if="currentBox=='ques'">
			<div class="quesBox" v-html="currentQues.body"></div>
			<h4>答题卡</h4>
			<div class="answers">
				<div v-for="(x,index) in answerList" class="answer" @click="chooseAnswer(x,index)">{{ x }}</div>
			</div>
		</div>
		<!--习题详情解析盒子-->
		<div class="contain detailcontain" v-if="currentBox=='quesDetail'">
			<div class="quesBox" v-html="currentQues.body"></div>
			<div class="answer"><span>正确答案：{{ transAnswer(currentQues.answer) }} </span> <span>我的答案：{{ userAnswers[index] }}</span></div>
			<h4>解析：</h4>
			<div v-html="currentQues.analysis"></div>
		</div>
		<!--统计盒子-->
		<div class="contain statisContainer" v-if="currentBox=='statis'">
			<h3>你答对了</h3>
			<div class="circleCount">
				<span class="big">{{ rightNum }}</span><span>/{{ questionList.length }}题</span>
			</div>
			<div class="answerResult">
				<div v-for="(x,index) in statis" :class="x?'rights':'wrongs'" @click="lookDetail(index)">{{ index+1 }}</div>
			</div>
			<p>点击题号查看详情</p>
		</div>
		<!--底部盒子-->
		<div class="foot">
			<div class="videoKnowledge" v-if="index>0&&currentBox=='ques'" @click="prevQues">上一题</div>
			<div class="consolidation" v-if="index!==(questionList.length-1)&&currentBox=='ques'" @click="nextQues">下一题</div>

			<div class="subAnswers" v-show="index==(questionList.length-1)&&currentBox=='ques'" @click="subAnswers">提交答案</div>
			<!--<div class="videoKnowledge" v-if="currentBox=='statis'" @click="goVideo">视频讲解</div>-->
			<div class="consolidation" v-show="currentBox=='statis'&&!fromeHomework" @click="refresh">再来几道</div>
			<div class="consolidation" v-show="currentBox=='quesDetail'" @click="holded">看懂了</div>
			<div class="consolidation" v-show="currentBox=='statis'&&fromeHomework" @click="back">完成</div>
		</div>
		<div class="noData" v-show="noData">
			此知识点正在完善中，请期待...
		</div>
	</div>
</template>

<script>
	import FooterMsg from '../../components/FooterMsg'
	import HeaderMsg from '../../components/Header'
	import { mapState, mapMutations } from "vuex"
	import api from '../../api'
	import $ from 'jquery'
	import { Indicator, Toast } from 'mint-ui';
	export default {
		activated() {
			this.noData=false;
			this.fromeHomework=false;
			this.INIT_STATE();
			//每次进来重置数据
			this.questionList = [];
			this.page = 1;
			this.index = 0;
			this.rightNum=0;
			this.currentQues = {};
			this.currentBox = 'ques';
			this.statis = [];
			this.rightNum = 0;
			this.quesDataYuan = [];
			this.userAnswers = [];
			if(this.exerciseInfo.typeid == 3 || this.exerciseInfo.typeid == 7) {
				this.answerList = ['A', 'B', 'C', 'D', 'E', 'F']
			} else {
				this.answerList = ['对', '错']
			}
			this.getData();
			$(function() {
				var h = document.body.clientHeight;
				$('.contain').css('min-height', h - 44 - 50 - 28 + 'px')
				$('.answer').removeClass('active')
			})
		},
		components: {
			FooterMsg,
			HeaderMsg
		},
		computed: {
			...mapState(["exerciseInfo", "userlogin"])
		},
		data() {
			return {
				msg: '<p>asd</p>',
				questionList: [],
				rightAnswers: [],
				userAnswers: [],
				answerList: [],
				index: 0,
				currentQues: {},
				currentBox: 'ques',
				statis: [], //统计结果
				rightNum: 0,
				page: 1,
				quesDataYuan: [],
				count: '', //当前知识点的总题数
				counting:0,
				noData:false,
				fromeHomework:false
			}
		},
		mounted() {},
		methods: {
			...mapMutations(["INIT_STATE"]),
			getData() {				
			Indicator.open({
				text: 'Loading...',
  				spinnerType: 'triple-bounce'
			});
				var that = this;
				//如果是从学情诊断过来的那么根据当前页获取试题且通过counted进行裁切
				if(this.exerciseInfo.source_url.indexOf('studydiag') > -1) {
					this.getDataFromStudyDialog()
				} else if(this.exerciseInfo.source_url.indexOf('homeworkHistory') > -1){
					//已提交的作业过来的
					this.fromeHomework=true
					this.getDataFromStudyHomeworkHistory()
				} else if(this.exerciseInfo.source_url.indexOf('homework') > -1){
					//未提交的作业过来的
					this.fromeHomework=true
					this.getDataFromStudyHomework()
				}else{
					//从错题本过来的那么只需要根据结构id进行获取试题	
					this.getDataFromWrongbook()
					
				}

			},
			getAnswer(index) {
				var ans = this.currentQues.answer
				if(ans.indexOf('正确') > -1 || ans == 'R' || ans.indexOf('对') > -1||ans.indexOf('√') > -1||ans.indexOf('错误') > -1 || ans == 'W' || ans.indexOf('错') > -1||ans.indexOf('×') > -1){
					
					this.answerList = ["对", "错"]
				}else{
					this.answerList = ['A', 'B', 'C', 'D', 'E', 'F']					
				}
			},
			nextQues() {
				this.index++;
				this.currentQues = this.questionList[this.index];
				this.getAnswer();
				//清除选项样式
				var answer = document.getElementsByClassName('answer');
				for(var i = 0; i < answer.length; i++) {
					answer[i].className = 'answer'
				}
				if(!this.userAnswers[this.index-1]){
					this.userAnswers[this.index-1]=''
				}
				
			},
			prevQues() {
				this.index--;
				this.currentQues = this.questionList[this.index];
				this.getAnswer();
				//清除选项样式
				var answer = document.getElementsByClassName('answer');
				for(var i = 0; i < answer.length; i++) {
					answer[i].className = 'answer'
				}
			},
			chooseAnswer(x, index) {
				var answer = document.getElementsByClassName('answer');
				if(answer[index].className.indexOf('active') > -1) {
					answer[index].setAttribute('class', 'answer');
					this.userAnswers[this.index] = this.userAnswers[this.index].replace(x, '')
				} else {
					answer[index].setAttribute('class', 'answer active');
					if(this.userAnswers[this.index]) {
						this.userAnswers[this.index] = this.userAnswers[this.index] + x;
					} else {
						this.userAnswers[this.index] = x
					}
				}

			},
			subAnswers() {
				this.currentBox = 'statis';
				if(!this.userAnswers[this.userAnswers.length]){
					this.userAnswers[this.userAnswers.length]=''
				}
				for(var i = 0; i < this.questionList.length; i++) {
					if(this.rightAnswers[i] == this.userAnswers[i]) {
						this.statis[i] = true;
						this.rightNum++;
					} else {
						this.statis[i] = false
					}
					this.questionList[i]['uanswer']=this.userAnswers[i]
				}
				
				var that=this
				//如果是从学情诊断过来那么向后台提交信息
				if(this.exerciseInfo.source_url.indexOf('studydiag') > -1) {					
					api.updateStudentPractice({
						studentid: this.userlogin.uid,
						courseid: this.exerciseInfo.courseid,
						categoryid: this.exerciseInfo.category_id,
						count: this.count,
						page: this.page,
						counting: this.counting + this.questionList.length
					}).then(response => {
						that.page=Number(response.data.data.page)
						that.counting=Number(response.data.data.counting)
					})
				}
				//如果是做作业的过来的
				if(this.exerciseInfo.source_url.indexOf('homework') > -1&&this.exerciseInfo.source_url.indexOf('homeworkHistory')==-1){
					//向后台提交做作业记录
					var content=[];
					this.questionList.forEach(function(x){
						content.push(x.id+':'+that.trAnswer(x.uanswer))
					})
					api.putStudentAssignment({
						studentid:this.userlogin.uid,
						aid:this.exerciseInfo.aid,
						assignmentid:this.exerciseInfo.assignmentid,
						recordid:this.exerciseInfo.recordid,
						content:content.join(','),
						truenums:this.rightNum
					}).then(response=>{
						console.log(response)
					})
				}
			},
			lookDetail(index) {
				console.log(index)
				this.index = index;
				this.currentQues = this.questionList[this.index];
				this.currentBox = 'quesDetail'
			},
			holded() { //看懂了
				this.currentBox = 'statis'
			},
			
			refresh() {
				this.index = 0;
				if(this.quesDataYuan.length >= 5) {
					this.questionList = this.quesDataYuan.splice(0, 5);
					this.rightAnswers = this.questionList.map(function(x) {
						return x.answer
					})
					this.currentQues = this.questionList[this.index];
					
				this.currentBox = 'ques';
				this.userAnswers = [];
				} else if(this.page*15<this.count){
					this.page++;
					this.getData();
					
				this.currentBox = 'ques';
				this.userAnswers = [];
				}else{
					Toast('此知识点相关试题您已做完了')
				}
			},
			transAnswer(ans) {
				if(ans.indexOf('正确') > -1 || ans == 'R' || ans.indexOf('对') > -1||ans.indexOf('√') > -1) {
					return '√';
				} else if(ans.indexOf('错误') > -1 || ans == 'W' || ans.indexOf('错') > -1||ans.indexOf('×') > -1 ) {
					return 'X';
				} else {
					return ans
				}
			},
			trAnswer(s){
				switch (s){
					case '对':
						return 'R';
					case '错':
						return 'W';
					default:
						return s;
				}
			},
			goVideo() {
				this.currentBox = 'quesVideo';
			},
			openVideo(event) {
				event.target.play()
				this.requestFullScreen(event.target)
			},
			requestFullScreen(Element) {
				if(Element.requestFullscreen) {
					Element.requestFullscreen();
				} else if(Element.mozRequestFullScreen) {
					Element.mozRequestFullScreen();
				} else if(Element.webkitRequestFullScreen) {
					Element.webkitRequestFullScreen();
				}
			},
			getDataFromStudyDialog() {
				var that = this;
				if(this.exerciseInfo.page!=-1){					
					this.page = this.exerciseInfo.page;
					this.counting=this.exerciseInfo.counting;
					this.exerciseInfo.page=-1
				}
				api.getListQuestion({
					category_id: this.exerciseInfo.category_id,
					type_id: this.exerciseInfo.typeid,
					level_id: this.exerciseInfo.level_id,
					page: this.page
				}).then(response => {
					that.count = response.data.count
					if(that.count=='0'){
						that.noData=true
					}else{
						that.noData=false
						
					that.quesDataYuan = response.data.datalist
					that.questionList = that.quesDataYuan.splice(0, 5);
					that.rightAnswers = that.questionList.map(function(x) {
						return x.answer
					})
					that.currentQues = that.questionList[that.index];
					}
					//that.getAnswer(that.index)
					that.currentBox = 'ques';
					
					Indicator.close();
				})
			},
			getDataFromWrongbook() {
				var that = this
				api.getListQuestion({
					category_id: this.exerciseInfo.category_id,
					type_id: this.exerciseInfo.typeid,
					level_id: this.exerciseInfo.level_id,
					page: this.page
				}).then(response => {
					that.noData=false
					that.count = response.data.count
					that.quesDataYuan = response.data.datalist
					that.questionList = that.quesDataYuan.splice(0, 5);
					that.rightAnswers = that.questionList.map(function(x) {
						return x.answer
					})
					that.currentQues = that.questionList[that.index];
					//that.getAnswer(that.index)
					that.currentBox = 'ques'
					
					Indicator.close();
				})
			},
			getDataFromStudyHomework(){
				var that=this
				//根据作业记录id获取相关试题的信息
				api.getStudentAssignmentList({
					courseid:0,
					studentid:this.userlogin.uid,
					classid:this.userlogin.classid,
					assignmentid:this.exerciseInfo.assignmentid,
					recordid:this.exerciseInfo.recordid,
					dayfrom:0,
					dayto:0,
					type:0
				}).then(response=>{
					api.getListQuestionById(response.data.data[0].assignmentcontent).then(response=>{
						that.questionList =response.data.datalist
						that.rightAnswers = that.questionList.map(function(x) {
						return x.answer
					})
					that.currentQues = that.questionList[that.index];
					that.getAnswer()
					that.currentBox = 'ques'					
					Indicator.close();
					})
				})		
			},
			getDataFromStudyHomeworkHistory(){
				var that=this
				//根据作业记录id获取相关试题的信息
				api.getStudentAssignment({
					studentid:this.userlogin.uid,
					aid:this.exerciseInfo.aid
				}).then(response=>{
					var arr=response.data.data[0].contentlist
					api.getListQuestionById(response.data.data[0].assignmentcontent).then(response=>{
						that.questionList =response.data.datalist
						that.rightAnswers = that.questionList.map(function(x) {
							return x.answer
						})
						that.questionList.forEach(function(v,i){
							var obj=arr.find(function(x){return x.tid==v.id})
							that.userAnswers.push(obj.uanswer)
							v['uanswer']=obj.uanswer
						})
						
				for(var i = 0; i < that.questionList.length; i++) {
					if(that.rightAnswers[i] == that.userAnswers[i]) {
						that.statis[i] = true;
						that.rightNum++;
					} else {
						that.statis[i] = false
					}
					that.questionList[i]['uanswer']=that.userAnswers[i]
				}
						that.currentBox = 'statis'					
						Indicator.close();
					})
				})
			},
		back(){
			window.history.back()
		}
		}
	}
</script>

<style scoped>
	.contain {
		font-size: 14px;
		text-align: left;
		height: calc(100% - 94px);
		height: -webkit-calc(100% - 94px);
		height: -moz-calc(100% - 94px);
		overflow: scroll;
		padding: 14px 0.2rem;
	}
	.noData{
		position: fixed;
		top: 44px;
		width: 100%;
		height: calc(100% - 44px);
		line-height: 300px;
		text-align: center;
		background-color: #f7f7f7;
	}
	.answers {
		border: 1px dashed rgba(0, 0, 0, 0.2);
		margin-top: 15px;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	
	.answers div {
		width: 50px;
		height: 50px;
		border-radius: 50px;
		text-align: center;
		line-height: 50px;
		margin-left: 7%;
		margin-right: 9%;
		background: #FFFFFF;
		box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.30);
	}
	
	.answers div:nth-of-type(n+4) {
		margin-top: 20px;
	}
	
	.answers div.active {
		background: #1382FA;
		box-shadow: 0 3px 6px 0 #58C6FB;
		color: white;
	}
	
	h4 {
		padding: 0 12px;
		margin-bottom: 10px;
	}
	
	h3 {
		text-align: center;
	}
	
	.statisContainer .circleCount {
		width: 2.7rem;
		height: 2.7rem;
		margin: 15px auto;
		border-radius: 2.7rem;
		border: 10px solid #1382FA;
		background: #629FFF;
		line-height: 2.7rem;
		text-align: center;
	}
	
	.statisContainer .circleCount span {
		font-size: 16px;
		color: #FFFFFF;
	}
	
	.statisContainer .circleCount span.big {
		font-size: 50px;
	}
	
	.videocontain {
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
		padding-top: 10px;
	}
	
	.videocontain>div {
		width: 40%;
		height: 20%;
	}
	
	.videocontain>div>video {
		width: 100%;
		height: 100%;
	}
	
	.answerResult {
		display: flex;
		justify-content: space-around;
		margin-top: 60px;
	}
	.answerResult div {
		width: 35px;
		height: 35px;
		border-radius: 35px;
		text-align: center;
		line-height: 35px;
		color: white;
	}
	
	.answerResult div.rights {
		background: #47E097;
	}
	
	.answerResult div.wrongs {
		background: #FF6269;
	}
	
	.statisContainer p {
		text-align: center;
		font-size: 12px;
		color: #A5A5A5;
		margin-top: 30px;
	}
	.quesBox{
		overflow: scroll;
	}
	.foot {
		position: fixed;
		display: flex;
		justify-content: flex-start;
		bottom: 0;
		height: 50px;
		font-size: 16px;
		color: #FFFFFF;
		background: #1382FA;
		box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.30);
		width: 100%;
		padding: 0;
		line-height: 50px;
	}
	
	.foot div {
		flex: 1;
		text-align: center;
	}
	
	.foot div.videoKnowledge {
		background: #FA8C13;
	}
	
	.detailcontain {
		padding-top: 15px;
	}
	
	.detailcontain .answer {
		display: flex;
		background-color: deepskyblue;
		height: 30px;
		line-height: 30px;
		margin-top: 30px;
	}
	
	.detailcontain .answer span {
		flex: 1;
		color: white;
	}
</style>